<script lang="ts" setup>
const list = [{ id: 1, quote: '关关雎鸠，在河之洲。窈窕淑女，君子好逑。' },
{ id: 1, quote: '君生我未生，我生君已老。君恨我生迟，我恨君生早。' },
{ id: 1, quote: '少若知修苦十载，岂余豆蔻多年华。' },
{ id: 1, quote: '知君用心如日月，事夫誓拟同生死。还君明珠双泪垂，恨不相逢未嫁时。' },
{ id: 1, quote: '年年岁岁花相似，岁岁年年人不同。' },]
</script>

<template>
  <div class="quote">
    <div class="content" v-for="item in list" :key="item.id">
      <span>{{ item.quote }}</span>
    </div>
    <div class="content">
      <span>君生我未生，我生君已老。君恨我生迟，我恨君生早。</span>
    </div>
    <div class="content">
      <span>少若知修苦十载，岂余豆蔻多年华。</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.quote {
  height: 550px;
  // background-color: red;
  overflow-y: auto;
  padding: 0 10px;
}

.content {
  padding: 12px;
  margin-top: 16px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
  transition: .3s;

  &:hover {
    box-shadow: rgba(22, 22, 22, 0.527) 0px 3px 12px;

  }
}
</style>